<template>
	<joy-page class="joyPage" :fixed="true" :needLogin="false">
		<scroll-view id="tab-bar" :scroll-x="true" class="bg-white nav topnav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" v-for="(item,index) in items" :key="index" @tap="tabSelect" :data-id="item.name">
					<span :class="item.name==TabCur?'text-black cur':''">{{item.label}}</span>
				</view>
			</view>
			<div class='block'></div>
		</scroll-view>
		<scroll-view style="width:100%;position: absolute;top: 114rpx;bottom: 0rpx;" :scroll-y="true" :scroll-top="scrollTop" @scroll="scrollTopFun"
		 :lower-threshold="50" :refresher-enabled="true" :refresher-threshold="100" :refresherTriggered="triggered"
		 @refresherpulling="onPulling" @refresherrefresh="onRefresh" @scrolltolower='loadMore'>
			<view id="list">
				<info-card :newList='newList' :isHome="false"></info-card>
			</view>
			<reach-bottom></reach-bottom>
		</scroll-view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import infoCard from "@/components/uni-card/infoCard.vue"
	export default {
		components: {
			infoCard
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin'])
		},
		data() {
			let that = this;
			return {
				scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				scrollLeft: 0,
				showComponent: false, // 是否显示
				top: 0, // 顶部监听事件使用
				triggered: false,
				imgUrl: that.$mConfig.assetsPath,
				banner: [],
				project: [],
				newList: [],
				grid: [],
				ka: [],
				adList: [],
				items: [{
						name: "0",
						label: "全部"
					},
					{
						name: "3",
						label: "行业资讯"
					},
					{
						name: "1",
						label: "项目动态"
					},
					{
						name: "2",
						label: "平台公告"
					}
				],
				TabCur: 0,
				info: {
					id: "0",
					curpage: 1
				},
				totalPage: 1,
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
			this.getNews();
		},
		onShow(){
			this.$store.commit("changeIsMore", false);
			this.$store.commit("changeIsEnd", false);
			this.$store.commit('SetShowValidateModal', false)
		},
		methods: {
			onPulling(e) {
				this.triggered = true
			},
			onRefresh() {
				this.getNews(true)
			},
			loadMore() {
				if (this.totalPage > this.info.curpage) {
					this.$store.commit("changeIsMore", true);
					this.$store.commit("changeIsEnd", false);
					this.info.curpage++
					this.getNews();
				} else {
					this.$store.commit("changeIsEnd", true);
					this.$store.commit("changeIsMore", false);
				}
			},
			scrollTopFun(e) {
				this.top = e.detail.scrollTop;
				this.getScrollTop();
			},
			// 计算距离
			getScrollTop() {
				let view = uni.createSelectorQuery().select(this.scrollComponents);
				let scrollView = uni.createSelectorQuery().select(this.scrollViewomponents);
				view.boundingClientRect(data => {
					// data.top  tab节点离页面顶部的距离为;
					if (data.top <= 0) {
						scrollView.boundingClientRect(scrollData => {
							// data.top  内容节点离页面顶部的距离为;
							if (scrollData.top >= 0) {
								this.showComponent = false;
							} else {
								this.showComponent = true;
							}
						}).exec();
					} else {
						this.showComponent = false;
					}
				}).exec();
			},
			tabSelect(e) {
				this.$store.commit("changeIsMore", false);
				this.$store.commit("changeIsEnd", false);
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.info.id = this.TabCur
				this.getNews(true);
			},

			async getNews(isRefresh) {
				if (isRefresh) {
					this.info.curpage = 1
					this.newList = []
					this.triggered = false
				}
				let indexInfo = await this.$apis.getNews(this.info);
					this.totalPage = indexInfo.total_page
					this.newList.push(...indexInfo.list);
					if (indexInfo.total_count === 0) {
						this.$store.commit("changeIsEmpty", true);
					} else {
						this.$store.commit("changeIsEmpty", false);
					}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safe {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(50, 50, 50, 1);
		margin-bottom: 1rpx;
		padding-bottom: 19rpx;

		.safe-img {
			width: 112rpx;
			height: 112rpx;
		}
	}
	.nav {
		z-index: 100;
		margin-bottom: 0;
	
		.block {
			width: 100%;
			height: 24rpx;
			background: rgba(246, 246, 246, 1);
		}
	}
	.project {
		margin-bottom: 24rpx;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(50, 50, 50, 1);
		line-height: 102rpx;
		background-color: #FFFFFF;
		padding: 4rpx 30rpx 0rpx;
		justify-content: space-between;

		.more {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 106, 0, 1);
		}
	}
</style>
